<template>
  <div class="q-pa-md" style="max-width: 350px">
    <t-list bordered>
      <t-expansion-item
        group="somegroup"
        icon="explore"
        label="First"
        default-opened
        header-class="text-primary"
      >
        <t-card>
          <t-card-section>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem,
            eius reprehenderit eos corrupti commodi magni quaerat ex numquam,
            dolorum officiis modi facere maiores architecto suscipit iste
            eveniet doloribus ullam aliquid.
          </t-card-section>
        </t-card>
      </t-expansion-item>

      <t-separator />

      <t-expansion-item
        group="somegroup"
        icon="perm_identity"
        label="Second"
        header-class="text-teal"
      >
        <t-card>
          <t-card-section>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem,
            eius reprehenderit eos corrupti commodi magni quaerat ex numquam,
            dolorum officiis modi facere maiores architecto suscipit iste
            eveniet doloribus ullam aliquid.
          </t-card-section>
        </t-card>
      </t-expansion-item>

      <t-separator />

      <t-expansion-item
        group="somegroup"
        icon="shopping_cart"
        label="Third"
        header-class="text-purple"
      >
        <t-card>
          <t-card-section>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem,
            eius reprehenderit eos corrupti commodi magni quaerat ex numquam,
            dolorum officiis modi facere maiores architecto suscipit iste
            eveniet doloribus ullam aliquid.
          </t-card-section>
        </t-card>
      </t-expansion-item>

      <t-separator />

      <t-expansion-item
        group="somegroup"
        icon="bluetooth"
        label="Fourth"
        header-class="bg-teal text-white"
        expand-icon-class="text-white"
      >
        <t-card class="bg-teal-2">
          <t-card-section>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem,
            eius reprehenderit eos corrupti commodi magni quaerat ex numquam,
            dolorum officiis modi facere maiores architecto suscipit iste
            eveniet doloribus ullam aliquid.
          </t-card-section>
        </t-card>
      </t-expansion-item>
    </t-list>
  </div>
</template>
